<template>
  <div>
    <div style="margin-left:10%; font-size: 24px;">基础信息
      <!-- <button @click="cik()">aaa</button> -->
    </div>
    <div>
      <el-form :model="form" label-width="auto" style="width: 100%">
        <el-row>
          <el-col :span="10">
            <el-form-item label="市场">
              <el-select v-model="form.market" placeholder="请选择内销或外销" size="default" style="width: 240px">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="国家">
              <el-select v-model="form.country" placeholder="内销为省市区,外销为国家" size="default" style="width: 240px">
                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="公司名称">
              <el-input v-model="form.company" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="机型">
              <el-input v-model="form.model" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户联系人">
              <el-input v-model="form.contacts" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户联系手机">
              <el-input v-model="form.phone" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户邮箱">
              <el-input v-model="form.email" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="老板联系人">
              <el-input v-model="form.boss" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="老板联系手机">
              <el-input v-model="form.bossPhone" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="老板邮箱">
              <el-input v-model="form.bossEmail" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="联系地址">
              <el-input v-model="form.adderss" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户目的港口">
              <el-input v-model="form.targetPort" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户分类">
              <el-select v-model="form.segmentation" placeholder="请选择" style="width: 240px">
                <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户类型">
              <el-select v-model="form.customerType" placeholder="合作客户/潜在客户" style="width: 240px">
                <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="公司简介">
              <el-input autosize v-model="form.companyProfile" style="width: 100%; height: 50px;" :rows="4"
                type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="客户目的地">
              <el-input v-model="form.destination" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="目的地和快递地址是否一致">
              <el-radio-group v-model="form.consistent">
                <el-radio value="1" size="large">一致</el-radio>
                <el-radio value="2" size="large">不一致</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="快递地址">
              <el-input v-model="form.courierAddress" style="width: 240px" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="成交或者询价产品">
              <el-checkbox-group v-model="checkList">
                <el-checkbox value="配件" label="配件" />
                <el-checkbox value="固定设备" label="固定设备" />
                <el-checkbox value="移动设备" label="移动设备" />
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin-left:10%; font-size: 24px;">基础信息</div>
    <div style="margin-top: 20px;">
      <el-form ref="ruleFormRef" :rules="rule" :model="form" label-width="auto" style="max-width:100%">
        <el-form-item label="归属销售" style="margin-left: 9%;">
          <el-input v-model="form.saleId" style="width: 240px" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="账号" style="margin-left: 9%;" prop="account">
          <el-input v-model="form.account" style="width: 240px" @blur="vailed(form.account)" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="密码" style="margin-left: 9%;" prop="password">
          <el-input v-model="form.password" style="width: 240px" type="password" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="密码验证手机号" style="margin-left: 9%;">
          <el-input v-model="form.verifyPhone" style="width: 240px" placeholder="请输入" />
        </el-form-item>
      </el-form>
    </div>
    <el-button style="margin-left: 70%;" type="primary" round @click="submitForm()">添加</el-button>
    <el-button type="info" round @click="back()">取消</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { addCustomer, accountChk } from "@/api/customer.ts"
import { useRouter } from 'vue-router'




const router = useRouter();

//验证规则
const rule = ref({
  account: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 5, message: '账号长度3-5之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度6-12之间', trigger: 'blur' },
  ],
})
//测试
function cik() {

}

//验证账号是否重复
async function vailed(account) {
  //有值
  // console.log(account)
  if (account != "") {
    //能够传递过来值
    // console.log(account)
    accountChk(account);

  }
}

//取消返回客户管理页面
function back() {
  router.push({ name: "customerManager" });
}

//复选框列表
const checkList = ref([])
//添加内容
const form = ref({
  account: "",
  address: "",
  boss: "",
  bossEmail: "",
  bossPhone: "",
  company: "",
  companyProfile: "",
  consistent: "",
  contacts: "",
  country: "",
  courierAddress: "",
  customerType: "",
  destination: "",
  email: "",
  interestProduct: "",
  isDeleted: "",
  market: "",
  model: "",
  password: "",
  phone: "",
  products: "",
  saleId: "",
  segmentation: "",
  source: "",
  status: "",
  targetPort: "",
  type: "",
  verifyPhone: ""
})



//
const ruleFormRef = ref()
//校验并添加--保存数据
const submitForm = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate((valid) => {
    if (valid) {
      //老师讲的新方法
      form.value.products = checkList.value.join(" ");//好方法
      // console.log(form.value);
      var date = JSON.stringify(form.value);
      addCustomer(date);
      router.push({ name: "customerManager" });
      console.log(ruleFormRef.value)
    }
  })
}


//市场复选框
const options = [
  {
    value: '1',
    label: '内销',
  },
  {
    value: '2',
    label: '外销',
  }
]
//国家复选框
const options1 = [
  {
    value: '1',
    label: '省市区',
  },
  {
    value: '2',
    label: '国家',
  }
]
//客户分类复选框
const options2 = [
  {
    value: '1',
    label: '小型最终用户',
  },
  {
    value: '2',
    label: '大型最终用户',
  }
]
//客户类型复选框
const options3 = [
  {
    value: '1',
    label: '合作客户',
  },
  {
    value: '2',
    label: '潜在客户',
  }
]
</script>

<style scoped>
.el-col {
  margin: left 7%;
}

.el-row {
  margin: 20px
}
</style>
